<template>
  <div class="app-container">
    <!-- <div class="header">
      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
        <el-form-item label="医院名称" prop="username">
          <el-input v-model="formInline.username" placeholder="请输入医院名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
          <el-button @click="reset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="footer">
      <div class="util" v-if="auth && auth.add">
        <el-button type="primary" @click="addHandler">
          <el-icon><Plus /></el-icon>
          新增平台
        </el-button>
      </div>
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          row-key="id"
          :data="list"
          style="width: 100%"
          border
        >
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column prop="name" label="平台名称" align="center" />
          <el-table-column
            prop="introduction"
            :show-overflow-tooltip="true"
            label="平台介绍"
            align="center"
          />
          <el-table-column prop="username" label="用户名" align="center" width="140" />
          <el-table-column prop="mobile" label="电话" align="center" width="140" />
          <el-table-column prop="qrcode" label="二维码" align="center" width="120">
            <template #default="scope">
              <el-image
                :src="scope.row.qrcode"
                fit="contain"
                style="width: 80px; height: 80px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="80" >
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :disabled="auth && !auth.modify"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" align="center" width="180" />
          <el-table-column prop="operator" label="操作" width="250" align="center">
            <template #default="scope">
              <el-space wrap style="display: flex; justify-content: center">
                <el-button
                  type="success"
                  size="small"
                  icon="View"
                  @click="jumpPath(`/hospital/dept?id=${scope.row.id}`)"
                  v-if="auth && auth.department"
                >
                  科室
                </el-button>
                <el-button
                  type="success"
                  size="small"
                  icon="View"
                  @click="jumpPath(`/hospital/room?id=${scope.row.id}`)"
                  v-if="auth && auth.room"
                >
                  房间
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  icon="Edit"
                  @click="editHandler(scope.row)"
                  v-if="auth && auth.edit"
                >
                  编辑
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  icon="Edit"
                  @click="editPass(scope.row)"
                  v-if="auth && auth.edit"
                >
                  修改密码
                </el-button>
                <el-button
                  @click="del(scope.row)"
                  type="danger"
                  size="small"
                  icon="Delete"
                  v-if="auth && auth.delete"
                >
                  删除
                </el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          :page-size="query.limit"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <HospDialog ref="hospDialog" @refresh="getList()" />
    <PersonalDialog ref="personalDialog"  />
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { nextTick, onMounted, reactive, ref } from 'vue'
import HospDialog from './components/HospDialog.vue'
import PersonalDialog from './components/PersonalDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import { platformList, deletePlatform, editPlatform } from '@/api/admin'

const router = useRouter()

const loading = ref(false)
const list = ref()
const total = ref(0)
const dialogVisible = ref(false)
const hospDialog = ref()
const personalDialog = ref()
const ruleFormRef = ref<FormInstance>()
const formInline = reactive({})

const query = reactive({
  page: 1,
  limit: 10,
})
const auth = ref()

const getList = () => {
  loading.value = true
  platformList(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}

const addHandler = () => {
  hospDialog.value.show()
}
const editHandler = (row) => {
  hospDialog.value.show(row)
}
const editPass = (row) => {
  personalDialog.value.show(row)
}
const del = (row) => {
  ElMessageBox.confirm(`你确定要删除平台 "${row.name}" 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    deletePlatform({
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}
const handleSizeChange = (val: number) => {
  query.page = 1
  query.limit = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.page = val
  getList()
}

const changeStatus = (row) => {
  ElMessageBox.confirm(
    `确定要${!row.status ? '禁用' : '启用'}平台 "${row.name}" 吗？`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      editPlatform({
        id: row.id,
        status: row.status,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.status ? '禁用' : '启用'}成功`,
            message: res.msg,
            type: 'success',
          })
        } else {
          if (row.status == 0) row.status = 1
          else if (row.status == 1) row.status = 0
        }
      })
    })
    .catch(() => {
      if (row.status == 0) row.status = 1
      else if (row.status == 1) row.status = 0
    })
}

const jumpPath = (url) => {
  router.push(url)
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
